<template>
	<view class="register">
		<!-- 注册页 -->
		<view class="avatar">
			头像：（点击右侧上传）
			<image :src="avatar" mode="widthFix" @click="chooseAvatar"></image>
		</view>
		
		<text>*</text>用户名：
		<input type="text" v-model="userName">
		
		昵称：
		<input type="text" v-model="nickName">
		
		<text>*</text>密码：
		<input type="password" v-model="password">
		
		<text>*</text>电话号码：
		<input type="tel" v-model="phonenumber">
		
		<text>*</text>性别：
		<radio-group @change="changeSex">
			<label>
				<radio value="0" checked/><text>男</text>
			</label>
			<label>
				<radio value="1" /><text>女</text>
			</label>
		</radio-group>
		
		邮 箱：
		<input type="text" v-model="email">
		
		身份证：
		<input type="idcard" v-model="idCard">
		
		<button
		type="primary"
		:disabled="userName!=''&&password!=''&&phonenumber!=''? false:true"
		@click="addRegister"
		>立 即 注 册</button>
	</view>
</template>

<script>
	import { http } from "../../utils/request.js"
	export default {
		data() {
			return {
				avatar:"",
				userName:"",
				nickName:"",
				password:"",
				phonenumber:"",
				sex:0,
				email:"",
				idCard:""
			};
		},
		methods:{
			// 上传头像（不确定能不能成功上传到服务器）
			chooseAvatar(){
				uni.chooseImage({
					count:1,
					success:res=>{
						this.avatar=res.tempFilePaths[0]
						uni.showToast({
							title:"上传成功"
						})
						uni.uploadFile({
							url: uni.getStorageSync("BASE_URL")+'/prod-api/common/upload',
							filePath: res.tempFilePaths[0],
							header:{
								Authorization : uni.getStorageSync("token")||"eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjIzMmIyOGViLWY1ZGUtNGI5Mi04YjhmLTdjNDY4YmFjYzJhMCJ9.9Q105dnV2rTQmb4Z7a6uFbiDoN3f8t-8FpdBidybcVf26gYTXTnZbLiuenqN4h8378lOaCTorA4cq-We9XlNOw"
							},
							success: res => {
								console.log(res.data)
							}
						});
					}
				})
			},
			// 性别单选框改变触发
			changeSex(e){
				this.sex=e.detail.value;
			},
			// 注册并跳转到登录页
			addRegister(){
				http({
					url:"/prod-api/api/register",
					method:"POST",
					data:{
						avatar:this.avatar,
						userName:this.userName,
						nickName:this.nickName,
						password:this.password,
						phonenumber:this.phonenumber,
						sex:this.sex,
						email:this.email,
						idCard:this.idCard
					}
				}).then(res=>{
					if(res.data.code!= 200){
						uni.showToast({
							title:res.data.msg,
							icon:'none'
						})
					}else{
						uni.showToast({
							title:"注册成功",
							mask:true
						})
						setTimeout(()=>{
							uni.redirectTo({
								url:"/pages/login/login"
							})
						},1500)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.register{
	padding: 40rpx;
	.avatar{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
		image{
			width: 150rpx;
			height: 150rpx;
			background-color: #f8f8f8;
			border: 1rpx solid #f8f8f8;
			border-radius: 20rpx;
		}
	}
	text{
		color: red;
	}
	input,
	radio-group{
		margin: 20rpx 0;
		background-color: #f8f8f8;
		border-radius: 20rpx;
		padding: 10rpx 20rpx;
		text{
			color: #000;
			margin-right: 20rpx;
		}
	}
	button{
		margin-top: 40rpx;
		border-radius: 20rpx;
	}
	button::after{
		border: 0;
	}
}
</style>
